<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表单拆分</title>

<!-- 框架必需start -->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!-- 框架必需end -->

<!-- 表单验证start -->
<script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="../../libs/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->

<!-- 表单拆分 start -->
<script src="../../libs/js/form/stepForm.js" type="text/javascript"></script>
<!-- 表单拆分 end -->

</head>
<body>
 <div class="page_content">
   


			<div class="groupTitle"><span>1、导航模式</span></div>
       
	   <form method="post" class="stepForm" stepFormTitle="true">
		<div id="step1-1" class="stepForm" stepFormTitle="表单步骤一">
			<table class="tableStyle" formMode="transparent">
				（第一部分表单内容）
				<tr>
					<td colspan="2">
						<input type="button" value="下一步" selfTarget="step1-1" nextTarget="step1-2"/>
					</td>
				</tr>
			</table>
		</div>
		
		<div id="step1-2" class="stepForm" stepFormTitle="表单步骤二">
			<table class="tableStyle" formMode="transparent">
				（第二部分表单内容）
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step1-2" prevTarget="step1-1"/>
						<input type="button" value="下一步" selfTarget="step1-2" nextTarget="step1-3"/>
					</td>
				</tr>
			</table>
		</div>
		
		<div id="step1-3" class="stepForm" stepFormTitle="表单步骤三">
			<table class="tableStyle" formMode="transparent">
				（第三部分表单内容）
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step1-3" prevTarget="step1-2"/>
						<input type="button" value="下一步" selfTarget="step1-3" nextTarget="step1-4"/>
					</td>
				</tr>
			</table>
		</div>
		
		<div id="step1-4" class="stepForm" stepFormTitle="表单步骤四">
			<table class="tableStyle" formMode="transparent">
				（第四部分表单内容）
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step1-4" prevTarget="step1-3"/>
						<input type="button" class="primary" value=" 提 交 " onclick="sureHandler()"/>
					</td>
				</tr>
			</table>
		</div>
	 </form>
	

  <div class="height_15"></div>
  


			<div class="groupTitle"><span>2、无导航模式</span></div>
      
<form method="post" class="stepForm" stepFormTitle="false">
	    <div id="step2-1" class="stepForm">
		    <table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">用户名：</td><td><input id="user" type="text" /></td>
				</tr>
				<tr>
					<td>籍贯：</td>
					<td>
						<select>
						  	<option value="">请选择籍贯</option>
						    <option>北京市</option>
						    <option>天津市</option>
						    <option>河北省</option>
						 </select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="下一步" selfTarget="step2-1" nextTarget="step2-2"/>
					</td>
				</tr>
			</table>
		</div>
		<div id="step2-2" class="stepForm">
			<table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">选择权限：</td>
					<td>
						<select id="select1">
							<option value="1">新增图片</option>
						    <option value="2">维护图片</option>
						    <option value="3">新增新闻</option>
						    <option value="4">发起投票活动</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" id="radio-1" name="ra" value="radio-1" /><label for="radio-1">男</label>
						<input type="radio" id="radio-2" name="ra"  value="radio-2"/><label for="radio-2">女</label>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step2-2" prevTarget="step2-1" />
						<input type="button" value="下一步" selfTarget="step2-2" nextTarget="step2-3" />
					</td>
				</tr>
		    </table>
	  </div>
	  <div id="step2-3" class="stepForm">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" /></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select >
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select>
					 
				</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<input type="checkbox" id="checkbox-1"  name="ck1" value="选项1"/><label for="checkbox-1" >唱歌</label>
					<input type="checkbox" id="checkbox-2"  name="ck1" value="选项2" /><label for="checkbox-2">跳舞</label>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step2-3" prevTarget="step2-2"/>
					<input type="button" value="下一步" selfTarget="step2-3" nextTarget="step2-4" />
				</td>
			</tr>
		</table>
	  </div>
	
	  <div id="step2-4" class="stepForm">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" /></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select >
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step2-4" prevTarget="step2-3"/>
					<input type="button" class="primary" value=" 提 交 " onclick="sureHandler()"/>
				</td>
			</tr>
		</table>
	  </div>
	</form>	

  <div class="height_15"></div>
  


			<div class="groupTitle"><span>3、自定义初始时的步骤</span></div>
      
      <p>form的currentStepNum属性设置表单出现时的步骤。如currentStepNum="1"则初始时在第二步。</p>
     <form method="post" class="stepForm" stepFormTitle="true" currentStepNum="1">
	    <div id="step3-1" class="stepForm" stepFormTitle="表单步骤一">
		    <table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">用户名：</td><td><input id="user" type="text" /></td>
				</tr>
				<tr>
					<td>籍贯：</td>
					<td>
						<select>
						  	<option value="">请选择籍贯</option>
						    <option>北京市</option>
						    <option>天津市</option>
						    <option>河北省</option>
						 </select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="下一步" selfTarget="step3-1" nextTarget="step3-2"/>
					</td>
				</tr>
			</table>
		</div>
		<div id="step3-2" class="stepForm" stepFormTitle="表单步骤二">
			<table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">选择权限：</td>
					<td>
						<select id="select1">
							<option value="1">新增图片</option>
						    <option value="2">维护图片</option>
						    <option value="3">新增新闻</option>
						    <option value="4">发起投票活动</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
					<input type="radio" id="radio-3" name="ra2" value="radio-3" /><label for="radio-3">男</label>
						<input type="radio" id="radio-4" name="ra2"  value="radio-4"/><label for="radio-4">女</label>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step3-2" prevTarget="step3-1" />
						<input type="button" value="下一步" selfTarget="step3-2" nextTarget="step3-3" />
					</td>
				</tr>
		    </table>
	  </div>
	  <div id="step3-3" class="stepForm" stepFormTitle="表单步骤三">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" /></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select >
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select>
					 
				</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<input type="checkbox" id="checkbox-3"  name="ck2" value="选项1"/><label for="checkbox-3" >唱歌</label>
					<input type="checkbox" id="checkbox-4"  name="ck2" value="选项2" /><label for="checkbox-4">跳舞</label>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step3-3" prevTarget="step3-2"/>
					<input type="button" value="下一步" selfTarget="step3-3" nextTarget="step3-4" />
				</td>
			</tr>
		</table>
	  </div>
	
	  <div id="step3-4" class="stepForm" stepFormTitle="表单步骤四">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" /></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select >
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step3-4" prevTarget="step3-3"/>
					<input type="button" class="primary" value=" 提 交 " onclick="sureHandler()"/>
				</td>
			</tr>
		</table>
	  </div>
	</form>	

  <div class="height_15"></div>
  


			<div class="groupTitle"><span>4、带验证的表单</span></div>
      <form method="post" class="stepForm" stepFormTitle="true" validate="true" id="form4">
	    <div id="step4-1" class="stepForm" stepFormTitle="表单步骤一">
		    <table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">用户名：</td><td><input id="user" type="text" class="validate[required,custom[noSpecialCaracters]]"/><span class="star">*</span></td>
				</tr>
				<tr>
					<td>籍贯：</td>
					<td>
						<select class="validate[required]">
						  	<option value="">请选择籍贯</option>
						    <option>北京市</option>
						    <option>天津市</option>
						    <option>河北省</option>
						 </select> <span class="star">*</span>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="下一步" selfTarget="step4-1" nextTarget="step4-2"/>
					</td>
				</tr>
			</table>
		</div>
		<div id="step4-2" class="stepForm" stepFormTitle="表单步骤二">
			<table class="tableStyle" formMode="transparent">
				<tr>
					<td width="100">选择权限：</td>
					<td>
						<select id="select1" class="validate[required]">
							<option value="">请选择</option>
							<option value="1">新增图片</option>
						    <option value="2">维护图片</option>
						    <option value="3">新增新闻</option>
						    <option value="4">发起投票活动</option>
						</select> <span class="star">*</span>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<div direction="inline" style="width:120px;">
						    <input type="radio" class="validate[required] radio" id="radio-5" name="ra3" value="radio-1" /><label for="radio-5">男</label>
					        <input type="radio" id="radio-6" name="ra3" class="validate[required] radio" value="radio-2"/><label for="radio-6">女</label> <span class="star">*</span>
					    </div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="上一步" selfTarget="step4-2" prevTarget="step4-1" />
						<input type="button" value="下一步" selfTarget="step4-2" nextTarget="step4-3" />
					</td>
				</tr>
		    </table>
	  </div>
	  <div id="step4-3" class="stepForm" stepFormTitle="表单步骤三">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" class="validate[required,custom[onlyNumber],length[0,3]]"/><span class="star">*</span></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select class="validate[required]">
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select>
					  <span class="star">*</span>
				</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<div direction="inline" style="width:120px;">
						<input type="checkbox" id="checkbox-5" class="validate[minCheckbox[1]] checkbox" name="ck3" value="选项1"/><label for="checkbox-5" >唱歌</label>
						<input type="checkbox" id="checkbox-6" class="validate[minCheckbox[1]] checkbox" name="ck3" value="选项2" /><label for="checkbox-6">跳舞</label> <span class="star">*</span>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step4-3" prevTarget="step4-2"/>
					<input type="button" value="下一步" selfTarget="step4-3" nextTarget="step4-4" />
				</td>
			</tr>
		</table>
	  </div>
	
	  <div id="step4-4" class="stepForm" stepFormTitle="表单步骤四">
		<table class="tableStyle" formMode="transparent">
			<tr>
				<td width="100">年龄：</td><td><input type="text" class="validate[required,custom[onlyNumber],length[0,3]]"/><span class="star">*</span></td>
			</tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select class="validate[required]">
					  	<option value="">请选择籍贯</option>
					    <option>北京市</option>
					    <option>天津市</option>
					 </select><span class="star">*</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="上一步" selfTarget="step4-4" prevTarget="step4-3"/>
					<input type="button" class="primary" value=" 提 交 " onclick="validateForm('#form4');"/>
				</td>
			</tr>
		</table>
	  </div>
	</form>	
      


      <div class="groupTitle"><span>5、弹窗中的分步表单</span></div>
<input type="button" value="点击查看表单" onclick="showForm();"/>
  
 </div>


<script type="text/javascript">
    
    function showForm(){
        var url = "../../sample_html/fullform/step-content1.html";
        top.Dialog.open({
          
           Height: 400,
           Width: 520,
           URL: url,
           Title: "表单拆分"
       });
    }
    function sureHandler(){
    	top.Toast("showNoticeToast", '进行提交处理');
    }
   
   //手动触发验证，被验证的表单元素是containerId容器里的。 可以验证整个表单，也可以验证部分表单。
	function validateForm(containerId){
	    var valid = $(containerId).validationEngine({returnIsValid: true});
		if(valid == true){
			top.Toast("showNoticeToast", '进行提交处理');
		}else{
		    top.Toast("showNoticeToast", '表单填写不正确，请按要求填写！');
		} 
	} 
    
</script>

</body>
</html>